<template>
  <a-drawer
    title="收入确认规则"
    :maskClosable="true"
    :visible="visible"
    :width="1000"
    @close="closeModal"
    :destroyOnClose="true"
  >
    <a-row type="flex">
      <a-col :flex="1">
        <div class="action-box">
          <a-space>
            <a-button type="primary" @click.stop="handleAddRule">
              +收入确认规则
            </a-button>
          </a-space>
        </div>
      </a-col>
    </a-row>
    <div class="mt-10" >
      <a-table
        :dataSource="dataSource"
        :columns="INIT_COLUMNS"
        :pagination="false"
        rowKey="id"
      >
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key === 'cost_type_txt'">
            <a-tag v-for="(item, index) in text" color="blue" :key="index">{{item}}</a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <a-button type="link" @click="handleEdit(record.id)">编辑</a-button>
            <a-button type="link" @click="handleDelete(record.id)" danger
            >删除</a-button
            >
          </template>
        </template>
      </a-table>
    </div>

    <!--  新增/编辑规则   -->
    <EditConfirmRule
      :visible="addVisible"
      :id="editId"
      @handleClose="handleClose"
      @handleSuccess="handleSuccess"
    />
  </a-drawer>
</template>

<script>
import {defineComponent, watch, reactive, toRefs, createVNode,} from "vue";
import store from "../../../../store";
import moment from "moment";
import {message, Modal} from "ant-design-vue";
import request from "@/common/utils/request";
import EditConfirmRule from "@/views/bill/IncomeList/modules/EditConfirmRule.vue";
import {DeleteOutlined, ExclamationCircleOutlined, FormOutlined} from "@ant-design/icons-vue";

export default defineComponent({
  name: "IncomeConfirmRule",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    FormOutlined,
    DeleteOutlined,
    EditConfirmRule,
  },
  setup(props, {emit}) {

    const closeModal = () => {
      emit("handleCancel");
    };


    const state = reactive({
      dataSource: [],
      addVisible: false,
      editId: 0,
    });

    const handleAddRule = () => {
      state.addVisible = true;
    };

    const getData = () => {
      request.get("/org", "/incomeConfirmRule/incomeConfirmRuleList", {}).then((res) => {
        state.dataSource = res?.list || [];
      });
    };

    const handleClose = () => {
      state.editId = 0;
      state.addVisible = false;
    };

    const handleSuccess = () => {
      init();
      handleClose();
    };

    const handleDelete = (id) => {
      Modal.confirm({
        title: () => "提示",
        content: () => "确定要删除该规则吗？",
        icon: () => createVNode(ExclamationCircleOutlined),
        okText: () => "确定",
        onOk() {
          request
            .del("/org", "/incomeConfirmRule/delIncomeConfirmRule", {id})
            .then((res) => {
              message.success(res?.msg || '删除成功');
              init();
            })
        },
      });
    };

    const handleEdit = (id) => {
      state.editId = id;
      state.addVisible = true;
    };

    const init = () => {
      getData();
    };

    const reset = () => {
      state.dataSource = [];
    };

    watch(
      () => props.visible,
      (visible) => {
        if (visible) {
          init();
        } else {
          reset();
        }
      }
    );
    return {
      ...toRefs(state),
      INIT_COLUMNS,
      closeModal,
      handleAddRule,
      handleClose,
      handleSuccess,
      handleDelete,
      handleEdit,
    };
  },
});

const INIT_COLUMNS = [
  {
    title: "收入规则名称",
    dataIndex: "rule_name",
    key: "rule_name",
    width: "20%",
    fixed: "left",
  },
  {
    title: "所属公司",
    dataIndex: "company_name",
    key: 'company_name',
    width: "20%",
  },
  {
    title: "费用类型",
    dataIndex: "cost_type_txt",
    key: 'cost_type_txt',
    width: "28%",
  },
  {
    title: "备注",
    dataIndex: "remark",
    key: 'remark',
    width: "20%",
  },
  {
    title: "操作",
    dataIndex: "id",
    key: "action",
    width: "12%",
  },
]
</script>
<style lang="less" scoped>
.action-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>